<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head class="fly-header layui-bg-black" th:include="admin/header.html :: head"></head>
<body>
<div class="layui-fluid">
  <div class="layui-card">
    <div class="layui-card-body">
      <div style="padding-bottom: 10px;">
        <button class="layui-btn layuiadmin-btn-comm" data-type="batchdel">批量删除</button>
        <button class="layui-btn layuiadmin-btn-comm" data-type="add">添加友情</button>
      </div>
      <table id="LAY-app-content-comm" lay-filter="LAY-app-content-comm" class="demo"></table>
      <script type="text/html" id="table-content-com-update">
        <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit"><i class="layui-icon layui-icon-edit"></i>编辑</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"><i class="layui-icon layui-icon-delete"></i>删除</a>
      </script>
    </div>
  </div>
</div>
<script th:src="@{/layuiadmin/layui/layui.js}"></script>
<script>
  layui.config({
    base: '/layuiadmin/' //静态资源所在路径
  }).extend({
    index: 'lib/index' //主入口模块
  }).use(['index', 'contlist', 'table'], function(){
    var $ = layui.$
            ,form = layui.form
            ,table = layui.table;


    //监听搜索
    form.on('submit(LAY-app-contcomm-search)', function(data){
      var field = data.field;
    });

    table.render({
      elem: '.demo'
      ,url: '/link/linkList',
      page: true //开启分页
      ,title: '用户数据表'
      ,cols: [
        [
          {type: 'checkbox',width:40},
          {field:'linkId', title:'友情ID', width:80,align:'center',unresize:true},
          {field:'linkName', title:'友情名称', width: 120,align:'center',unresize:true},
          {field:'linkLink', title:'友情链接', width: 310,unresize:true},
          {field:'linkTime', title:'添加时间', width: 120,align:'center',unresize:true},
          {field:'right', title:'操作',toolbar:'#table-content-com-update',unresize:true, align:'center',width: 200},
        ]
      ]
      ,limits: [5,10,20,50,100,200,500]  //每页条数的选择项，默认：[10,20,30,40,50,60,70,80,90]。
      ,limit: 10 //每页默认显示的数量
    });
    //点击事件
    var active = {
      batchdel: function(){
        var checkStatus = table.checkStatus('LAY-app-content-comm')
                ,checkData = checkStatus.data; //得到选中的数据

        if(checkData.length === 0){
          return layer.msg('请选择数据');
        }

        layer.confirm('确定删除吗？', function(index) {
          $.ajax({
            url:'/link/deleteLinks',
            data:{"delete":JSON.stringify(checkData)},
            dataType:'json',
            method:'post',
            success:function (res) {
              if (res.success){
                layer.msg('删除成功', {
                  icon: 1
                  ,time: 1000
                });
              }else {
                layer.msg('删除失败', {
                  icon: 1
                  ,time: 1000
                });
              }
              table.reload('LAY-app-content-comm');
            }
            ,error: function(){
              layer.alert('系统错误，请联系管理员！', {
                icon: 2,
                skin: 'layer-ext-moon' //该皮肤由layer.seaning.com友情扩展。关于皮肤的扩展规则，去这里查阅
              });
            }
          });

          table.reload('LAY-app-content-comm');
        });
      },
      add: function(){
        layer.open({
          type: 2
          ,title: '添加友情'
          ,content: '/link/linkadd'
          ,area: ['450px', '260px']
          ,btn: ['确定', '取消']
          ,yes: function(index, layero){
            var iframeWindow = window['layui-layer-iframe'+ index]
                    ,submit = layero.find('iframe').contents().find("#LAY-user-role-submit");
            var body = layer.getChildFrame('body', index);
            var linkName = body.find('input[name="linkName"]').val()
            var linkLink = body.find('input[name="linkLink"]').val()
            //监听提交
            iframeWindow.layui.form.on('submit(LAY-user-role-submit)', function(data){
              $.post('/link/addlink',{
                "linkName":linkName,"linkLink":linkLink
              },function (res){
                if (res.success){
                  layer.msg('添加友情成功', {
                    icon: 1
                    ,time: 1000
                  });
                }else {
                  layer.msg('添加友情失败', {
                    icon: 1
                    ,time: 1000
                  });
                }
                table.reload('LAY-app-content-comm');
              },'json');
              layer.close(index); //关闭弹层
            });

            submit.trigger('click');
          }
        });
      }
    }

    //监听行工具栏
    table.on('tool(LAY-app-content-comm)',function (obj) {
      //获取行数据
      var data = obj.data;
      //点击删除
      if (obj.event === 'del'){
        layer.confirm('确定删除吗？', function(index){
          $.ajax({
            url:'/link/deleteLink',
            data:{"linkId":data.linkId},
            dataType:'json',
            method:'post',
            success:function (res) {
              if (res.success){
                layer.msg('删除成功', {
                  icon: 1
                  ,time: 1000
                });
              }else {
                layer.msg('删除失败', {
                  icon: 1
                  ,time: 1000
                });
              }
              table.reload('LAY-app-content-comm');
            }
            ,error: function(){
              layer.alert('系统错误，请联系管理员！', {
                icon: 2,
                skin: 'layer-ext-moon' //该皮肤由layer.seaning.com友情扩展。关于皮肤的扩展规则，去这里查阅
              });
            }
          });
          layer.close(index);
        });
      } else if (obj.event === 'edit'){
        //点击编辑
        layer.open({
          //打开子窗口
          type: 2
          ,title: '编辑友情',
          data:data
          ,content: '/link/linkadd'
          ,area: ['450px', '260px'],
          btn: ['确定', '取消']  ,
          success:function (layero, index) {
            //打开子窗口后通过success赋值,两个变量基本是固定写法
            var body = layer.getChildFrame('body', index);
            var iframeWin = window[layero.find('iframe')[0]['name']];
            //给子窗口中的元素赋值
            body.find('input[name="linkName"]').val(data.linkName);
            body.find('input[name="linkLink"]').val(data.linkLink);
          },yes: function(index, layero){
            //模板自带,固定写法,要注意子窗口中的提交按钮id对应submitID
            var iframeWindow = window['layui-layer-iframe'+ index]//得到iframe页的窗口对象，执行iframe页的方法：
                    ,submitID = 'LAY-user-role-submit'
                    ,submit = layero.find('iframe').contents().find('#'+ submitID);
            var body = layer.getChildFrame('body', index);
            var linkName = body.find('input[name="linkName"]').val()
            var linkLink = body.find('input[name="linkLink"]').val()
            //监听提交
            iframeWindow.layui.form.on('submit('+ submitID +')', function(obj){
              $.ajax({
                url:'/link/updatelink',
                data:{"linkId":data.linkId,"linkName":linkName,"linkLink":linkLink},
                dataType:'json',
                method:'post',
                success:function (res) {
                  if (res.success){
                    layer.msg('修改友情成功', {
                      icon: 1
                      ,time: 1000
                    });
                  }else {
                    layer.msg('修改友情失败', {
                      icon: 1
                      ,time: 1000
                    });
                  }
                  table.reload('LAY-app-content-comm');
                }
                ,error: function(){
                  layer.alert('系统错误，请联系管理员！', {
                    icon: 2,
                    skin: 'layer-ext-moon' //该皮肤由layer.seaning.com友情扩展。关于皮肤的扩展规则，去这里查阅
                  });
                }
              });
              layer.close(index); //关闭弹层
            });
            submit.trigger('click');
          }
        });
      }
    })

    $('.layui-btn.layuiadmin-btn-comm').on('click', function(){
      var type = $(this).data('type');
      active[type] ? active[type].call(this) : '';
    });
  });
</script>
</body>
</html>
